<template>
  <div>
    <!--<div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-setting"></i> 模板管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{$route.meta.displayName}}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>-->
    <template :loading="tabLoading" element-loading-text="拼命加载中">
      <el-tabs v-model="activeName" :active-name="activeName" >
        <el-tab-pane  v-for="(tabItem,tabIndex) in hostGroups" :key="tabIndex" :label="tabItem.name" :name="tabItem.groupid">
          <template v-for="(row ,rowindex) in (Math.floor(tabItem.templates.length/colCnts)+1)" v-if="tabItem.templates!=null &&tabItem.templates.length >0">
            <el-row  type="flex" :key="rowindex"  :gutter="10" >
              <el-col :span="24/colCnts" v-for="(col ,colindex) in colCnts" :key="colindex">
                <el-card v-if="tabItem.templates!=null &&(rowindex)*colCnts +colindex < tabItem.templates.length" :body-style="{ padding: '0px' }">
                  <div style="padding: 14px;text-align:center;">
                    <span v-if="tabItem.templates[(rowindex)*colCnts +colindex].iconData!=null">
                      <img  :src="tabItem.templates[(rowindex)*colCnts +colindex].iconData.image" alt="" class="image" />
                    </span>
                    <span >{{tabItem.templates[(rowindex)*colCnts +colindex].name}}</span>
                    <div class="bottom clearfix" v-if="tabItem.templates[(rowindex)*colCnts +colindex].iconData != null">
                      <el-button type="text" class="button" @click="modifyTemplateIcon(tabItem.templates[(rowindex)*colCnts +colindex],'更改图标')">更改图标</el-button>
                    </div>
                    <div class="bottom clearfix" v-else>
                      <el-button type="text" class="button" @click="chooseTemplateIcon(tabItem.templates[(rowindex)*colCnts +colindex],'选择图标')">选择图标</el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </template>
          <template v-else>
            <div class ="noshadow">
                暂无模板
            </div>

          </template>
        </el-tab-pane>
      </el-tabs>
    </template>

    <template>
    <div>
      <div class="rightLayout">
        <div class="layoutWrap" data-tpl="addEquipment">
          <div class="layoutTop">
            <div class="layoutTopMain">
              <h2 class="layoutTitle"><span class="typeImg"></span><span class="typeName">{{operateTemplate.operateName}}</span></h2>
              <a href="javascript:;" class="hideLayoutBtn" @click="hideLayout()"><i class="layoutCloseIcon"></i>关闭</a></div>
          </div>
          <div class="layoutMain">
              <div class="currentImg" v-if="operateTemplate.template!=null && operateTemplate.template.iconData!=null">
                <div class ="title">
                  当前图标
                </div>
                <el-row  type="flex"  :gutter="10" >
                    <el-col :span="4">
                      <el-card :body-style="{ padding: '0px' }">
                        <div style="padding: 14px;text-align:center;">
                          <span >
                            <img v-if="operateTemplate.template.iconData.image!=null" :src="operateTemplate.template.iconData.image" alt="" class="image" />
                          </span>
                          <span >{{operateTemplate.template.name}}</span>
                        </div>
                      </el-card>
                    </el-col>
                </el-row>
              </div>

              <el-tabs v-model="templateTab">
                <!--<el-tab-pane label="本地图标" name="localIcon">
                  <el-row v-for="(row ,rindex) in (Math.floor(iconsData.length/8)+1)" type="flex" :key="rindex"   :gutter="10" >
                      <el-col :span="24/8" v-for="(col ,cindex) in 8" :key="cindex">
                        <el-card v-if="(rindex*8+cindex) <iconsData.length" :body-style="{ padding: '0px' }">
                          <div v-if="operateTemplate.template!=null && operateTemplate.template.iconData !=null && operateTemplate.template.iconData.id == iconsData[rindex*8+cindex].id" class="shadow" >
                            <span>
                              <img v-if="iconsData[rindex*8+cindex]!=null" :src="iconsData[rindex*8+cindex].imageData" alt="" class="image" />
                            </span>
                          </div>
                          <div v-else class="noshadow" >
                            <span >
                              <img @click="handleChooseIconClick(iconsData[rindex*8+cindex],operateTemplate)" v-if="iconsData[rindex*8+cindex]!=null" :src="iconsData[rindex*8+cindex].imageData" alt="" class="image" />
                            </span>

                          </div>
                        </el-card>
                      </el-col>
                  </el-row>
                </el-tab-pane>-->

                <el-tab-pane label="系统图标" name="sysIcon">
                   <el-row v-for="(row ,rindex) in (Math.floor(sysIconsData.length/8)+1)" type="flex" :key="rindex"   :gutter="10" >
                       <el-col :span="24/8" v-for="(col ,cindex) in 8" :key="cindex">
                         <el-card v-if="(rindex*8+cindex) <sysIconsData.length" :body-style="{ padding: '0px' }">
                           <div v-if="operateTemplate.template!=null && operateTemplate.template.iconData !=null && operateTemplate.template.iconData.id == sysIconsData[rindex*8+cindex].imageid" class="shadow" >
                             <span>
                               <img v-if="sysIconsData[rindex*8+cindex]!=null" :src="sysIconsData[rindex*8+cindex].image" alt="" class="image" />
                             </span>
                           </div>
                           <div v-else class="noshadow">
                             <span>
                               <img  @click="handleChooseIconClick(sysIconsData[rindex*8+cindex],operateTemplate)" v-if="sysIconsData[rindex*8+cindex]!=null" :src="sysIconsData[rindex*8+cindex].image" alt="" class="image" />
                             </span>
                           </div>
                         </el-card>
                       </el-col>
                   </el-row>
                </el-tab-pane>
              </el-tabs>

          </div>
        </div>
      </div>
    </div>
    </template>
  </div>
</template>

<script>
  import TemplateService from 'api/config/monitortemplate'
  import IconsService from 'api/config/iconmanager'
  export default {
    data :function (){
      return {
        colCnts :4 ,
        // rowCnts:1,
        // templateData:[],//模板数据 //暂时木有用到
        // iconsData:[],//图标数据
        sysIconsData:[],//系统图标数据
        hostGroups:[], //主机群 数据
        // reTemplateAndIcons:[], //模板和图标的关系 数据
        activeName:'',
        currentTabData:[],
        operateTemplate:{},
        templateTab:'sysIcon',
        tabLoading:true ,
      };
    },
    watch:{
    },
    methods:{
      handleChooseIconClick(iconData,opTemplate){
        //检查数据的合理性
        var self = this;
        if (iconData !=null && opTemplate!=null){
          if (opTemplate.template.iconData !=null && opTemplate.template.reTemplateAndIcons!=null){

              //不为空 则需删除 之间关联的图标 的关系
              let params = {
                id :opTemplate.template.reTemplateAndIcons.id
              };
              TemplateService.delReTemplateAndIcons(params).then(response =>{

              }).catch(err=>{

              });
          }else{

          }
          //选中 的图标数据
          // 1 将 模板id 和图标id 存放入数据库
          let params = {
            templateId:opTemplate.template.templateid,
            iconsId:iconData.imageid //这里不用 管 系统图标 的imageid ，因为 id 和imageid 是同一值
          };
          TemplateService.saveReTemplateAndIcons(params).then(response =>{
              if (response.data!=null && response.data.errorCode== null){
                self.$message({
                  type:"success",
                  message:"模板与图标关联成功"
                });
                opTemplate.template.reTemplateAndIcons = response.data ;
                let opName = new Object('修改图标');
                opTemplate.operateName = opName;
                opTemplate.template.iconData = iconData ;

              }
          }).catch(err =>{

          });


        }
      },
      modifyTemplateIcon(template,operateName){
        this.operateTemplate= {
          template:template,
          operateName :operateName
        };
        this.showLayout();
      },
      //选择模板图标的事件
      chooseTemplateIcon (template,operateName){
        this.operateTemplate= {
          template:template,
          operateName :operateName
        };
        this.showLayout();
      },
      //显示出隐藏掉的右滑动窗口
      showLayout(){
        $(".rightLayout").show().animate({left:"20%"}).addClass("showBlock");
        $(".layoutTop").show().animate({left:"20%"});//右侧顶部固定
        $("body").addClass("hideScoll");//隐藏主滚动条，禁止出现双滚
      },

      hideLayout() {
        $(".rightLayout").animate({
          left: "100%"
        }).removeClass("showBlock").hide();
        $(".layoutTop").animate({
          left: "100%"
        }).hide();
        $(".layoutWrap").show();
        $("body").removeClass("hideScoll");
      },

      // queryTemplatesData(){
      //   TemplateService.getAllTemplates().then(response =>{
      //       console.log("##########getAllTemplates :");
      //       console.log(response.data);
      //       this.templateData = response.data.result;
      //
      //
      //   }).catch(err =>{
      //
      //   });
      // },

      queryAllTemplateWithImage(){
        TemplateService.queryAllTemplateWithImage().then(response =>{
            if (response.data!=null ){
              for (var i = 0 ; i < response.data.length; i++){
                var group = response.data[i];
                if (group.templates !=null && group.templates.length>0){

                  for (var j=0 ; j <group.templates.length ; j++){
                    var item = group.templates[j] ;
                    if (item.iconData){
                      if (item.iconData.imageformat){
                        item.iconData.image = "data:"+item.iconData.imageformat+";base64,"+item.iconData.image ;
                      } else {
                        item.iconData.image = "data:image/png;base64,"+item.iconData.image;
                      }
                    }
                  }

                }
              }

              this.hostGroups = response.data;
              var self = this;
              self.activeName = self.hostGroups[0].groupid;
              self.tabLoading = false;
            }


        }).catch(err =>{

        });
      },
      queryAllSysIcons(){
        var self = this ;
        IconsService.getAllSysIcons().then(response=>{
          if (response.data !=null && response.data.errorCode ==null){
              for (var i = 0 ; i <response.data.length ; i++){
                var item = response.data[i];
                if (item.imageformat){
                  item.image = "data:"+item.imageformat+";base64,"+item.image ;
                } else {
                  item.image = "data:image/png;base64,"+item.image;
                }
              }
              self.sysIconsData = response.data ;

          }
        })

      },

    },
    created:function (){
      this.queryAllTemplateWithImage();
      this.queryAllSysIcons();
    },
    mounted:function (){

    },
    computed:{


    }
  }

</script>



<style scoped>
.shadow {
  padding: 14px;
  text-align:center;
  border: 3px rgba(0, 204, 204, .5) solid;
  -webkit-box-shadow: 0 0 10px rgba(0, 204, 204, .5);
  -moz-box-shadow: 0 0 10px rgba(0, 204, 204, .5);
  box-shadow: 0 0 10px rgba(0, 204, 204, .5);
}

.noshadow{
  padding: 14px;
  text-align:center;
}

div.noshadow:hover{
  border: 1px rgba(0, 204, 204, .5) solid;
  -webkit-box-shadow: 0 0 10px rgba(0, 204, 204, .5);
  -moz-box-shadow: 0 0 10px rgba(0, 204, 204, .5);
  box-shadow: 0 0 10px rgba(0, 204, 204, .5);
}
.currentImg .title{
  padding: 0 16px;
  height: 42px;
  box-sizing: border-box;
  line-height: 42px;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  color: #8391a5;
  position: relative;
}
.currentImg .img{
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  margin: 0 8px 8px 0;
  display: inline-block;

}
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {

    width: 64px;
    height: 64px;
    display: block;
    margin:auto;
    cursor:pointer;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }

  .clearfix:after {
      clear: both
  }
.icon-list-li-item{
  width: 64px;
  height: 64px;
}

</style>
